<template>
  <div>
    <el-card class="box-card">
      <el-form ref="form" :model="formData" size="medium" label-width="110px">
        <el-row>
          <el-col :span="20">
            <el-form-item label="监督机构" prop="orgName">
              <el-select
                v-model="formData.orgId"
                multiple
                collapse-tags
                style="margin-left: 20px;"
                placeholder="请选择">
                <el-option :key="orgid" label="全部" :value="orgid">
                </el-option>
                <el-option
                  v-for="item in forname"
                  :key="item.id"
                  :label="item.orgName"
                  :value="item.id">
                </el-option>
              </el-select>

            </el-form-item>
          </el-col>

          <el-col :span="2">
            <el-button type="success" @click="inquire">检索</el-button>
          </el-col>
          <el-col :span="2">
            <download-excel
              class="export-excel-wrapper"
              :data="devicelist"
              :fields="fields"
              :header="title"
              name="仪器设备配置情况表.xls">
              <el-button type="warning" size="small" icon="el-icon-download" >导出</el-button>
            </download-excel>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="devicelist"
                border style="width:100%; font-size: 5px">
        <el-table-column
          fixed
          prop="orgName"
          label="单位"
          width="160">
        </el-table-column>
        <el-table-column label="千元以上检测仪器设备台数">
          <el-table-column
            prop="equ1Count"
            label="小于等于一万"
            width="70" >
          </el-table-column>
          <el-table-column
            prop="equ2Count"
            label="一万到十万"
            width="70">
          </el-table-column>
          <el-table-column
            prop="equ3Count"
            label="大于或等于十万"
            width="70">
          </el-table-column>
        </el-table-column>
        <el-table-column label="车辆（辆）">
          <el-table-column
            prop="busCount"
            label="汽车(不含快速检测车)"
            width="80">
          </el-table-column>
          <el-table-column
            prop="rapidtestvehicleCount"
            label="快速检测车"
            width="80">
          </el-table-column>
          <el-table-column
            prop="motorCount"
            label="摩托车"
            width="80">
          </el-table-column>
        </el-table-column>
        <el-table-column label="执法取证工具（台数）">
          <el-table-column
            prop="cameraCount"
            label="照相机"
            width="80">
          </el-table-column>
          <el-table-column
            prop="videoCount"
            label="摄像机"
            width="80">
          </el-table-column>
          <el-table-column
            prop="copycatNum"
            label="录音机"
            width="80">
          </el-table-column>
        </el-table-column>
        <el-table-column label="办公及信息化设备（台数）">
          <el-table-column
            prop="computerNum"
            label="台式电脑"
            width="60">
          </el-table-column>
          <el-table-column
            prop="notepadNum"
            label="笔记本电脑"
            width="60">
          </el-table-column>
          <el-table-column
            prop="pbxCount"
            label="交换机"
            width="60">
          </el-table-column>
          <el-table-column
            prop="faxCount"
            label="传真机"
            width="60">
          </el-table-column>
          <el-table-column
            prop="ohpCount"
            label="投影仪"
            width="60">
          </el-table-column>
          <el-table-column
            prop="vrcount"
            label="复印机"
            width="60">
          </el-table-column>
        </el-table-column>

      </el-table>
      <el-row type="flex" justify="center" class="page-row" v-show="page_show">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pagesize"
          layout="total, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  import {post} from "@/utils/api";

  export default {
    data() {
      return {
        devicelist:[],
        currentPage:1,
        total:0  ,//一共有多少条数据
        pagesize:6, //每页显示多少条数据  页数等于  total/pagesize
        moneylist:[],
        page_show:true,
        formData:{},
        forname:[],
        orgid:0,
        title:"仪器设备配置情况表",
        fields:{'单位':'orgName','小于等于一万':'equ1Count','一万到十万':'equ2Count','大于或等于十万':'equ3Count','汽车(不含快速检测车)':'busCount',
        '快速检测车':'rapidtestvehicleCount','摩托车':'motorCount','照相机':'cameraCount','摄像机':'videoCount','录音机':'copycatNum','台式电脑':'computerNum',
        '笔记本电脑':'notepadNum','交换机':'pbxCount','传真机':'faxCount','投影仪':'ohpCount','复印机':'vrcount'},
      }
    },
    async created() {
      let res = await post("org/getallorg")
      this.forname = res
      this.getListByPage(1)
    },
    methods:{
      //按条件查询
      async inquire(){
        console.log(this.formData)
        //判断对象是否为空
        if(Object.keys(this.formData).length==0){
          // console.log("-------------------------")
          this.getListByPage(1)
        }else {
          let res = await post("orgplus/getbyorgid",{...this.formData})
          // console.log(res);
          this.devicelist = res
          this.page_show = false
          this.formData = {}
        }

      },
      //分页查询
      async getListByPage(page){
        let res = await post("orgplus/getbypage",{page: page, count: this.pagesize})
        // console.log(res)
        //处理信息
        this.page_show = true
        this.devicelist = res.records
        // console.log(this.devicelist)
        this.total = res.total
        // console.log(res.total)

      },
      handleCurrentChange(currentPage){
        //当前页码改变时触发
        // console.log(currentPage)
        this.currentPage = currentPage
        this.getListByPage(currentPage)
      },
    }
  }
</script>
<style></style>
